<template>
    <div class="star" :class='starType'>
        <span v-for='itemClass in itemClasses' :class = 'itemClass' class='star-item'></span>
    </div>
</template>
<script type="text/ecmascript-6">
    const LENGTH = 5;
    const ClSON = 'on';
    const CLSOFF = 'off';
    const CLSHALF = 'half';

    export default {
      props: {
        size: {
          type: Number
        },
        score: {
          type: Number
        }
      },
      computed: {
        starType() {
          return 'star-' + this.size;
        },
        itemClasses() {
          let result = [];
          let num = Math.floor(this.score * 2) / 2;
          let semi = num % 1 !== 0;
          for (var i = 0; i < num; i++) {
            result.push(ClSON);
          }
          if (semi) {
            result.push(CLSHALF);
          }
          while (result.length < LENGTH) {
            result.push(CLSOFF);
          }
          return result;
        }
      }
    };
</script>
<style lang="scss" rel="stylesheet/scss">
    @import "../../common/scss/mixin.scss";
    .star{
        .star-item{
            display: inline-block;
            background: no-repeat;

        }
        &.star-48{
            .star-item{
                width:20px;
                height: 20px;
                margin-right:22px;
                background-size: 20px 20px;
                &:last-child{
                    margin-right: 0px;
                }
                &.on{
                    @include bg-img('star48_on')
                }
                &.half{
                    @include bg-img('star48_half')
                }
                &.off{
                    @include bg-img('star48_off')
                }
            }
        }
        &.star-36{
            .star-item{
                width:15px;
                height: 15px;
                margin-right:6px;
                background-size: 15px 15px;
                &:last-child{
                    margin-right: 0px;
                }
                &.on{
                    @include bg-img('star36_on')
                }
                &.half{
                    @include bg-img('star36_half')
                }
                &.off{
                    @include bg-img('star36_off')
                }
            }
        }
        &.star-24{
            .star-item{
                width:10px;
                height: 10px;
                margin-right:3px;
                background-size: 10px 10px;
                &:last-child{
                    margin-right: 0px;
                }
                &.on{
                    @include bg-img('star24_on')
                }
                &.half{
                    @include bg-img('star24_half')
                }
                &.off{
                    @include bg-img('star24_off')
                }
            }
        }
    }
</style>
